<template>

	<el-cascader @visible-change="visibleChange" @change="cascaderChange" size="large" ref="cascaderRef" filterable
		v-model="contentValue" :options="optionsValue" :props="props" clearable>
		<template #tag="{ data, deleteTag }">
			<template v-for="(tag,index) in data" :key="tag.key">
				<el-tag @click.native.stop="" size="large" :hit="tag.hitState" :closable="tag.closable"
					disable-transitions @close="deleteTag(tag)" closable>
					{{ tag.text }}
					<template v-if="tag.node.label=='定时上下架'">
						<ta-datepicker @change="handleChange" v-model="ALLModel[tag.node.value]"></ta-datepicker>
					</template>
					<el-switch v-else-if="false" @change="handleChange" @click.native.stop=""
						v-model="ALLModel[tag.node.value]"></el-switch>
				</el-tag>
			</template>
		</template>
	</el-cascader>

</template>

<script>
	export default {
		data() {
			return {
				ALLModel: {

				},
				props: {
					value: 'id',
					label: 'tag_name',
					leaf: 'isLeaf',
					multiple: true,
					emitPath: false,
				}
			};
		},
		mounted() {
			this.doLoading();
			this.getTree();
		},
		props: {
			modelValue: {
				type: Array,
				required: true
			}
		},
		computed: {
			optionsValue: {
				get() {
					return this.$cache.get("system/category/manage/tree/tag", []);
				},
				set(val) {
					this.$cache.set("system/category/manage/tree/tag", val);
				}
			},
			contentValue: {
				get() {
					if (this.modelValue) {
						return this.modelValue.map(item => {
							this.ALLModel[item.id] = item.modelValue;
							return item.id
						});
					}
				},
				set(val) {
					this.updateModel()
				}
			}
		},
		methods: {
			doLoading() {
				if (this.$refs.cascaderRef.contentRef.querySelector('.el-cascader-menu__empty-text')) {
					this.$refs.cascaderRef.contentRef.querySelector('.el-cascader-menu__empty-text').innerHTML = `
				  <i class="el-icon is-loading" style="font-size: 14px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path></svg></i> 加载中
				`
				}
			},
			updateModel() {
				const data = this.$refs.cascaderRef.$refs.cascaderPanelRef.getFlattedNodes(true).filter((node) => {
					if (node.checked) {
						node.calcText(true, "/")
						return true;
					}
				}).map(item => {
					return {
						label: item.label,
						value: item.value,
						id: item.value,
						text: item.text,
						modelValue: this.ALLModel[item.value]
					}
				})
				this.$emit('update:modelValue', data);
			},
			handleChange() {
				this.updateModel()
				this.$refs.cascaderRef.togglePopperVisible(false);
			},
			cascaderChange(e) {

			},
			async visibleChange() {
				this.getTree();
			},
			async getTree() {
				if (!this.optionsValue || this.optionsValue.length == 0) {
					var res = await this.$API.system.commPost("system/category/manage/tree")({
						model: 'Tag'
					});
					this.optionsValue = res.data;
				}
			}
		}
	};
</script>
